<template>
  <div
    style="float: left;background-color: white;margin-top: -50px;width: 100%">
    <div style="margin-top: 100px">
      <el-row style="margin-left: 50px">
        <el-col span="10">
          <span style="font-size: larger">运动健身</span>
          <el-divider></el-divider>
        </el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span style="font-size: larger">亚健康</span>
          <el-divider></el-divider>
        </el-col>
      </el-row>
      <el-row style="margin-left: 50px">
        <el-col span="10">
          <span>增肌</span>
          <el-divider direction="vertical" ></el-divider>
          <span>减脂</span>
          <el-divider direction="vertical"></el-divider>
          <span>保护关节</span>
          <el-divider direction="vertical"></el-divider>
          <span>抽筋</span>
          <el-divider direction="vertical"></el-divider>
          <span>健身器材</span>
        </el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span>疲惫</span>
          <el-divider direction="vertical" ></el-divider>
          <span>焦虑</span>
          <el-divider direction="vertical"></el-divider>
          <span>易过敏</span>
          <el-divider direction="vertical"></el-divider>
          <span>压力肥</span>
        </el-col>
      </el-row>
      <el-row style="margin-left: 50px;margin-top: 25px">
        <el-col span="10"><span style="font-size: larger">美妆个户</span>
          <el-divider></el-divider></el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span style="font-size: larger">家庭保健</span>
          <el-divider></el-divider>
        </el-col>
      </el-row>
      <el-row style="margin-left: 50px">
        <el-col span="10">
          <span>洁面卸妆</span>
          <el-divider direction="vertical" ></el-divider>
          <span>沐浴露</span>
          <el-divider direction="vertical"></el-divider>
          <span>爽肤水</span>
          <el-divider direction="vertical"></el-divider>
          <span>乳液</span>
          <el-divider direction="vertical"></el-divider>
          <span>精华</span>
          <el-divider direction="vertical"></el-divider>
          <span>面膜</span>
          <el-divider direction="vertical"></el-divider>
          <span>眼部护理</span>
        </el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span>口罩防护</span>
          <el-divider direction="vertical" ></el-divider>
          <span>急救消毒</span>
          <el-divider direction="vertical"></el-divider>
          <span>家庭药箱</span>
          <el-divider direction="vertical"></el-divider>
          <span>活络刮痧</span>
          <el-divider direction="vertical" ></el-divider>
          <span>养生煎药</span>
          <el-divider direction="vertical"></el-divider>
          <span>健身侧重</span>
        </el-col>
      </el-row>
      <el-row style="margin-left: 50px;margin-top: 50px">
        <el-col span="10">
          <span style="font-size: larger">环境清洁</span>
          <el-divider></el-divider>
        </el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span style="font-size: larger">热门品牌</span>
          <el-divider></el-divider>
        </el-col>
      </el-row>
      <el-row style="margin-left: 50px">
        <el-col span="10">
          <span>消毒液</span>
          <el-divider direction="vertical" ></el-divider>
          <span>洗手液</span>
          <el-divider direction="vertical"></el-divider>
          <span>洗衣用品</span>
          <el-divider direction="vertical"></el-divider>
          <span>花露水</span>
          <el-divider direction="vertical"></el-divider>
          <span>湿巾</span>
          <el-divider direction="vertical"></el-divider>
          <span>清洗剂</span>
        </el-col>
        <el-col span="3">&nbsp;&nbsp;</el-col>
        <el-col span="10">
          <span>森田面膜</span>
          <el-divider direction="vertical" ></el-divider>
          <span>同仁堂</span>
          <el-divider direction="vertical"></el-divider>
          <span>怡思丁</span>
          <el-divider direction="vertical"></el-divider>
          <span>东阿阿胶</span>
          <el-divider direction="vertical" ></el-divider>
          <span>白云山</span>
          <el-divider direction="vertical"></el-divider>
          <span>仁和</span>
          <el-divider direction="vertical"></el-divider>
          <span>江中</span>
        </el-col>
      </el-row>
    </div>
<!--    <div-->
<!--      style="float: left;background-color: white;border: 2px solid white;border-radius:20px;margin-left: 150px;margin-top: 60px;width: 1200px;height: 350px;">-->
<!--      <div-->
<!--        style="float: left;border-radius:20px;margin-top:-10px;margin-left: 1px;width: 1200px ;height:40px;border-bottom: 1px solid rgba(204,204,204,0.55) ;background-color: rgba(204,204,204,0.92)">-->
<!--        <div style="float: left;margin-top: -10px;margin-left: 15px">-->
<!--          <p style="font-family: 黑体;font-size: 20px">属性筛选(共有12种商品)</p>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div-->
<!--        style="background-color: white;float: left;margin-top:20px;margin-left: 10px;width: 1100px;height:55px;border-bottom: 1px solid rgba(204,204,204,0.55) ">-->
<!--        <el-row>-->
<!--          <el-col span="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品牌</el-col>-->
<!--          <el-col span="5">-->
<!--            <el-button type="" @click="nik()"><img width="50px" height="20px" src="../../../assets/nike.jpg">-->
<!--            </el-button>-->
<!--          </el-col>-->
<!--          <el-col span="5">-->
<!--            <el-button type="" @click="adid()"><img width="50px" height="20px" src="../../../assets/adidas.jpg">-->
<!--            </el-button>-->
<!--          </el-col>-->
<!--          <el-col span="5">-->
<!--            <el-button type="" @click="Li()"><img width="50px" height="20px" src="../../../assets/Li-Ning.jpg">-->
<!--            </el-button>-->
<!--          </el-col>-->
<!--          <div style="margin-left: 1000px;margin-top: 0px">-->
<!--            <el-button type="" v-on:click="">更多+</el-button>-->
<!--          </div>-->
<!--        </el-row>-->

<!--      </div>-->
<!--      <div-->
<!--        style="background-color: white;float: left;margin-top:30px;margin-left: 10px;width: 1100px ;height:30px;border-bottom: 1px solid rgba(204,204,204,0.55) ">-->
<!--        <el-row>-->
<!--          <el-col span="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尺码</el-col>-->
<!--          <el-col span="3">36</el-col>-->
<!--          <el-col span="3">37</el-col>-->
<!--          <el-col span="3">38</el-col>-->
<!--          <el-col span="3">38</el-col>-->
<!--          <el-col span="3">38</el-col>-->
<!--          <div style="margin-left: 1000px;margin-top: -20px">-->
<!--            <el-button type="" v-on:click="">更多+</el-button>-->
<!--          </div>-->
<!--        </el-row>-->
<!--      </div>-->
<!--      <div-->
<!--        style="background-color: white;float: left;margin-top:30px;margin-left: 10px;width: 1100px ;height:30px;border-bottom: 1px solid rgba(204,204,204,0.55) ">-->
<!--        <el-row>-->
<!--          <el-col span="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格</el-col>-->
<!--          <el-col span="3">100-200</el-col>-->
<!--          <el-col span="3">200-300</el-col>-->
<!--          <el-col span="3">300-400</el-col>-->
<!--          <el-col span="3">400-500</el-col>-->
<!--          <el-col span="3">500-600</el-col>-->
<!--          <div style="margin-left: 1000px;margin-top: -20px">-->
<!--            <el-button type="" v-on:click="">更多+</el-button>-->
<!--          </div>-->
<!--        </el-row>-->
<!--      </div>-->
<!--      <div-->
<!--        style="background-color: white;float: left;margin-top:30px;margin-left: 10px;width: 1100px ;height:30px;border-bottom: 0.5px solid rgba(204,204,204,0.55) ">-->
<!--        <el-row>-->
<!--          <el-col span="4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;材质</el-col>-->
<!--          <el-col span="3">布</el-col>-->
<!--          <el-col span="3">超纤布</el-col>-->
<!--          <el-col span="3">皮质</el-col>-->
<!--          <el-col span="3">网眼布</el-col>-->
<!--          <el-col span="3">合成材料</el-col>-->
<!--          <div style="margin-left: 1000px;margin-top: -20px">-->
<!--            <el-button type="" v-on:click="">更多+</el-button>-->
<!--          </div>-->
<!--        </el-row>-->
<!--      </div>-->
<!--    </div>-->
    <div
      style="background-color: white;width: 1200px;border: 2px solid white;border-radius:20px;margin-left: 100px;margin-top: 70px;height: auto">
      <el-row>
        <el-col>
          <el-card body-style="{ padding:'0px' }" class="goods" v-for="(index) in goods " shadow="hover" :key="n">
            <a v-on:click="goodsMsg(index)">
              <img :src="index.img" alt="" class="goodsImg">
              <div class="goodsName">{{index.goods}}</div>
              <div class="goodsBrand">{{index.brand}}</div>
              <div class="goodsPrice">￥{{index.price}}</div>
            </a>
            <el-button style="margin-left: 20px" type="warning" plain>直接购买</el-button>
            <el-button type="warning" class="el-icon-shopping-cart-2">加入购物车</el-button>
          </el-card>
        </el-col>
      </el-row>
      <div>
        <img src="../../../assets/end.png" style="width: 800px;height: 70px;margin-left:27%">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ManSlipper",
  data() {
    return {
      goods: [],
    }
  },
  mounted() {
    this.manSport();
  },
  methods:{
      manSport(){
        this.$http.post('http://localhost:8888/shopping/man',{type:3},{emulateJSON:true}).then(res=>{
          this.goods = res.data.data;
          console.log(goods);
        })
      }
    }
  }
</script>


<style>
.goods {
  float: left;
  border: 0px solid #000;
  margin: 35px;
  width: 330px;
  height: 450px;
  border-radius: 23px;
}

.goodsImg {
  /*border: 1px solid ;*/
  float: left;
  margin-left: -19px;
  margin-top: -20px;
  width: 330px;
  height: 300px;
  border-radius: 23px;


}

.goodsName {
  /*border: 3px solid #d23030;*/
  margin-left: 40px;
  width: 270px;

}

.goodsBrand {
  /*border: 3px solid #6acb2e;*/
  margin-left: 90px;
  width: 70px;

}

.goodsPrice {
  /*border: 3px solid #3071d2;*/
  color: #ff3213;
  font-size: 20px;
  width: 70px;
}
</style>

